<template>
  <div class="appointment-container">
    <!-- 标题区域 -->
    <div class="header">
      <h2>预约查询</h2>
    </div>

    <!-- 选项卡 -->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="挂号" name="registration">
        <!-- 查询条件区域 -->
        <div class="search-section">
          <h3>查询条件</h3>
          <el-form :model="queryForm" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="医生姓名:">
                  <el-input v-model="queryForm.doctorName" placeholder="请输入医生姓名" clearable>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="一级科室:">
                  <el-input v-model="queryForm.department" placeholder="请输入科室名" clearable>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="人数上限:">
                  <el-select v-model="queryForm.maxPatients" placeholder="请选择人数" clearable>
                    <el-option
                        v-for="item in maxPatientss"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="button-group">
                <el-button @click="resetQuery">重置</el-button>
                <el-button type="primary" @click="handleQuery">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 数据列表区域 -->
        <div class="data-section">
          <h3>数据列表</h3>
          <el-table :data="registrationData" border style="width: 100%">
            <el-table-column prop="id" label="ID" v-if="false" />
            <el-table-column prop="doctorName" label="医生姓名" width="120" />
            <el-table-column prop="department" label="科室" width="220">
              <template #default="{ row }">
                {{ row.departmentName }}
              </template>
            </el-table-column>
            <el-table-column label="预约时间" width="180" >
              <template #default="scope">
                {{ scope.row.timePeriod }}:{{scope.row.startTime}}
              </template>
            </el-table-column>
            <el-table-column prop="maxPatients" label="人数上限" width="100" />
            <el-table-column prop="registeredCount" label="已约名额" width="120">
              <template #default="{row}">
                {{ row.registeredCount }} <span v-if="row.registeredCount >= row.maxPatients" style="color: red">满员</span>
              </template>
            </el-table-column>
            <el-table-column label="剩余名额" width="100">
              <template #default="{row}">
                {{ row.maxPatients - row.registeredCount }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="{row}">
                <el-button link type="primary" @click="viewDetails(row)">查看明细</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页插件 ========================================== =============================== -->
        <div class="demo-pagination-block">
          <!--
                      1. current-page  ： 当前页   （重要）
                      2. page-size  : 每页显示条数（重要）
                      3. page-sizes ： 分页类型
                      4. small： 字体大小
                      5. disabled： 是否可用
                      6. background： 按钮颜色
                      7. total： 总数据条数（重要）

              -->
          <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[2, 3, 4, 5]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"></el-pagination>
        </div>
        <!-- 分页插件 ========================================== =============================== -->

      </el-tab-pane>

      <el-tab-pane label="体检" name="medical">
        <MedicalAppointment />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import { ElMessage } from 'element-plus'
import MedicalAppointment from './MedicalAppointment.vue'
import axios from "axios";
import {router} from "@/router/index.js";


// 选项卡
const activeTab = ref('registration')
// 分页模型定义=======================================================================
let pageNum = ref(1);
let pageSize = ref(3);
let total = ref(1);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getRegistrationData();
}
const handleCurrentChange = (val) => {
  // 将这个val数字赋值给 pageNum
  pageNum.value = val;
  getRegistrationData();
}
// 分页模型定义=======================================================================

// 挂号预约数据==============================================================
const registrationData = ref([])
const getRegistrationData = () => {
  axios.get(`/doctorSchedule/getRegistrationData/${pageNum.value}/${pageSize.value}`).then(res=>{
    registrationData.value = res.data.obj.data;
    total.value = res.data.obj.total;
  })
}
//人数上限====================================================================
const maxPatientss = ref([])
const getMaxPatients = () => {
  axios.get('/doctorSchedule/getMaxPatientsOptions').then(res => {
    maxPatientss.value = res.data.obj.map(item=>({
      value: item.id || item.value || item,
      label:  item.name || item.label || item
    }))
  })
}
onMounted(()=>{
  getRegistrationData();
  getMaxPatients()
})
// 挂号预约数据==============================================================


// 查询表单
const queryForm = ref({})
// 查询操作
const handleQuery = () => {
axios.post(`/doctorSchedule/searchQueryFrom/${pageNum.value}/${pageSize.value}`,queryForm.value).then(res=>{
  registrationData.value = res.data.obj.data;
  total.value = res.data.obj.total;
})
}

// 重置查询
const resetQuery = () => {
  queryForm.value = {}
  getRegistrationData()
}

// 查看明细
const viewDetails = (row) => {
  ElMessage.success(`查看预约: ${row.id} 的明细`)
  router.push(`/appointmentDetail/${row.id}`)
}
</script>

<style scoped>
.appointment-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.search-section {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-section h3 {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.data-section {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.data-section h3 {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.button-group {
  text-align: right;
  padding-right: 10px;
}

.el-table {
  margin-top: 10px;
}
</style>